﻿@using HelloMinasan.Framework.Web.WebHelpers
@using HelloMinasan.Framework.Helpers

@model HelloMinasan.Web.Song.ViewModels.ModelForList<HelloMinasan.Domain.Relationship>

@{
    ViewBag.Title = "My Friends List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.msgbox.min.js")"></script>
<link href="@Url.Content("~/Content/jquery.msgbox.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/Js/Relationship.js")"></script>
<script>
    var keyword = "@ViewBag.Keyword";
</script>
<div class="contentSection">
    <div class="titleSection">
        <img src="@Url.Content("~/Content/Images/social.png")" width="20" height="20"/>
        <span class="titleTab">My friends list</span>
    </div>
    <div class="contentSectionInside" style="padding-top: 20px">
        <div class="searchContainer" align="left">
            <input id="inputNameSearch" class="inputUserSearch" value="@ViewBag.Keyword" placeholder="Username or name" type="text" />
            <button onclick="searchFriend()" class="backgroundLinear inputButtonSearch">Search </button>
        </div>
        @foreach (var item in Model.ListItem)
        {
            <div class="divAccountFriendList">
                <div class="starScore">@item.User3.Point</div>
                <div align="center">
                    <a href="/Account/UserInformation/@item.User3.Username" >
                        @*<img src="@item.User3.Avatar" />*@
                        @Html.Avatar(item.User3.Id, item.User3.HasAvatar, HelloMinasan.Cdn.AvatarSize.SmallSearch, new { alt = item.User3.DisplayName })
                    </a>
                </div>
                <div class="accountName">@item.User3.Username
                    <img onclick="deleteFriend('@item.User3.Username', @Model.PagingControl.CurrentPageNumber)" src="~/Content/Images/delete.png"
                        style="width: 20px !important; height: 20px !important; margin-top: 5px; float: right" />
                </div>
            </div>
        }
         <div align="left" style="margin-top: 10px;">
            @if (@Model.PagingControl.PreviousPageNumber > 0)
            {
                <a onclick="gotoFriendPage(1)" class="buttonClass">First</a>
                <a onclick="gotoFriendPage(@Model.PagingControl.PreviousPageNumber)" class="buttonClass">Back</a>
            }
            <select onchange="jumpToPage(this)">
                @for (int i = 1; i <= Model.TotalPageCount; i++)
                {
                    if (i != Model.PagingControl.CurrentPageNumber)
                    { <option value="@i">@i</option> }
                    else
                    { <option value="@i" selected>@i</option> }
                }
            </select>
            @if (@Model.PagingControl.NextPageNumber <= Model.TotalPageCount)
            {
                <a onclick="gotoFriendPage(@Model.PagingControl.NextPageNumber)" class="buttonClass">Next</a>
                <a onclick="gotoFriendPage(@Model.TotalPageCount)" class="buttonClass">Last</a>
            }
        </div>
    </div>
</div>
